/*
 * 文章信息修改
 * @Author: LuoQianJun
 * @Date: 2018-01-27 17:43:35
 * @Last Modified by: ljb
 * @Last Modified time: 2018-02-11 14:27:44
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }

</style>
<template>
<div class="v-admin-article-edit">
    <Form ref="formValidate" :model="formValidate" :label-width="80">

        <Form-item label="文章类型" prop="article_type_id">
            <Select v-model="formValidate.article_type_id" clearable placeholder="请选择文章类型">
                <OptionGroup v-for="articleType in articleTypes" :key="articleType.id" :label="articleType.name">
                    <Option v-for="sub_type in articleType.get_sub_tags" :value="sub_type.id + ''" :key="sub_type.id">{{ sub_type.name }}</Option>
                </OptionGroup>
            </Select>
        </Form-item>

        <Form-item label="案例图" prop="thumb">
            <Upload :before-upload="file=>fileChange(file,'thumb','image_info')"
                    :on-remove="file=>fileChange(file,'thumb','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">案例图</Button>
                <div class="license-tip" slot="tip" v-if="image_info.thumb_name">{{ image_info.thumb_name }}</div>
                
            </Upload>
            <img v-if="image_info.thumb" :src="image_info.thumb">
                        
        </Form-item>

        <Form-item label="轮播图" prop="carousel_figure" v-if="isCompanyNews">
            <Upload :before-upload="file=>fileChange(file,'carousel_figure','image_info')"
                    :on-remove="file=>fileChange(file,'carousel_figure','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">轮播图</Button>
                <div class="license-tip" slot="tip" v-if="image_info.carousel_figure_name">{{ image_info.carousel_figure_name }}</div>
            </Upload>
            <img v-if="image_info.carousel_figure" :src="image_info.carousel_figure">
        </Form-item>


        <!-- <Form-item label="导航图" prop="banner">
            <Upload :before-upload="file=>fileChange(file,'banner','image_info')"
                    :on-remove="file=>fileChange(file,'banner','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">上传导航图</Button>
                <div class="license-tip" slot="tip" v-if="image_info.banner_name">{{ image_info.banner_name }}</div>      
            </Upload>
            <img v-if="image_info.banner" :src="image_info.banner">
        </Form-item>

        <Form-item label="公司缩略图" prop="company_thumb">
            <Upload :before-upload="file=>fileChange(file,'company_thumb','image_info')"
                    :on-remove="file=>fileChange(file,'company_thumb','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">上传缩略图</Button> 
                <div class="license-tip" slot="tip" v-if="image_info.company_thumb_name">{{ image_info.company_thumb_name }}</div>          
            </Upload>
             <img v-if="image_info.company_thumb" :src="image_info.company_thumb">
        </Form-item> -->

        <Form-item label="文章标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入文章标题"></Input>
        </Form-item>

        <Form-item label="文章描述" prop="description">
            <Input v-model="formValidate.description" type="textarea"  placeholder="请输入文章描述"></Input>
        </Form-item>

         <Form-item label="关键字" prop="keywords ">
            <Input type="text" v-model="formValidate.keywords " placeholder="请输入文章关键字"></Input>
        </Form-item>

        <Form-item label="文章内容" prop="content">

            <vueEditor  :preview-width="950"
                        :ueditor-config="ue_config"
                        :pre-data="editor_pre_data"
                        @change="getDetailContent"></vueEditor>
            <!-- <vue-editor :preview-width="950"
                        :class-name="class_name"
                        :request-url="request_url"
                        :open-upload-img="true"
                        :pre-data="editor_pre_data"
                        @change="getDetailContent"></vue-editor> -->
        </Form-item> 

        <Form-item label="优先级" prop="sort">
            <InputNumber v-model="formValidate.sort" :max="9999" :min="0" placeholder="请输入优先级"></InputNumber>
        </Form-item>

        <Form-item>
            <Button type="primary" @click="updateArticle">更新</Button>
        </Form-item>

    </Form>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import vueEditor from 'src/views/component/vue-ueditor';
// import vueEditor from 'src/views/component/vueEditor';

export default {

    name: 'article-edit',

    props: ['article-types','article-detail'],

    data() {	
        return {
             
            ue_config : {
                initialFrameWidth : 650,
                enableAutoSave : false
            },

            // class_name : 'editor-edit',

            // request_url : API_LIST.MULTI_UPLOAD_IMG,

            formValidate : {

                article_type_id : '',       //文章类别id

                thumb : '',                 //案例图

                // banner : '',                //导航图

                carousel_figure : '',       //轮播图

                // company_thumb : '',         //公司缩略图

                title : '',                 //文章标题

                description : '',           //文章描述

                content : '',               //文章内容

                sort : 0,                    //优先级

                keywords: '',


            },                  //编辑信息时的表单

            editor_pre_data : '',       //富文本编辑器的预设值

            // 上传的图片信息
            image_info: {

                thumb: '',

                banner: '',

                carousel_figure : '',

                company_thumb: '',

                thumb_name : '',

                banner_name : '',

                carousel_figure_name : '',

                company_thumb_name : '',

            },

        }
    },
    components: {
        vueEditor
    },
    watch: {
        'articleDetail' : function(){

            if( this.articleDetail ) {

                this.formValidate.article_type_id = String(this.articleDetail.article_type_id);

                this.formValidate.thumb = this.articleDetail.thumb;

                // this.formValidate.banner = this.articleDetail.banner;

                this.formValidate.carousel_figure = this.articleDetail.carousel_figure;

                // this.formValidate.company_thumb = this.articleDetail.company_thumb;

                this.formValidate.title = this.articleDetail.title;

                this.formValidate.description = this.articleDetail.description;

                this.formValidate.content = this.articleDetail.content;

                this.formValidate.sort = this.articleDetail.sort;

                this.editor_pre_data = this.articleDetail.content;

                this.image_info.thumb = this.articleDetail.thumb;

                // this.image_info.banner = this.articleDetail.banner;

                this.image_info.carousel_figure = this.articleDetail.carousel_figure;

                 this.formValidate.keywords = this.articleDetail.keywords || '';

                // this.image_info.company_thumb = this.articleDetail.company_thumb;

            }

        }  
    },

    computed: {

        isCompanyNews() {

            for (let i in this.articleTypes) {

                if (parseInt(this.articleTypes[i].id) === 1) {

                    let sub_tags = this.articleTypes[i].get_sub_tags;

                    for (let key in sub_tags) {

                        if (String(sub_tags[key].id) === this.formValidate.article_type_id) {

                                return true;
                        }

                    }

                }

            }

            return false;


        }

    },
    
    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            switch(param) {

                case 'thumb' :
                        
                    this[info].thumb_name = file.name;

                    this[info].thumb = '';

                    break;
                
                case 'banner' : 

                    this[info].banner_name = file.name;
                    
                    this[info].banner = '';
                    
                    break;

                case 'carousel_figure' :

                    this[info].carousel_figure_name = file.name;

                    this[info].carousel_figure = '';
                    
                    break;
                
                case 'company_thumb' :

                    this[info].company_thumb_name = file.name;

                    this[info].company_thumb = '';
                    
                    break;

            }

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 富文本内容改变时触发的回调
         * @param  {string} content {文章详情的内容}
         * @return {undefined}
         */
        getDetailContent(content){

            this.formValidate.content = content;

        },

        /**
         * 重置合作伙伴信息
         * @return {undefined}
         */
        resetArticleInfo(){

            for (let key in this.image_info) {

                this.image_info[key] = '';
            }

        },

        /**
         * 更新合作伙伴信息
         * @return {undefined}
         */
        updateArticle(){
            
            this.resetArticleInfo();

            this.$emit('update',this.articleDetail.id,this.formDataCreate());

        },

        /**
         * 手动拼接formdata数据
         * @return {Object}
         */
        formDataCreate(){

            const new_object = {

                _method : 'PUT',

                article_type_id : this.formValidate.article_type_id,

                thumb : this.formValidate.thumb,                 //案例图

                // banner : this.formValidate.banner,                //导航图

                carousel_figure : this.formValidate.carousel_figure,       //轮播图

                // company_thumb : this.formValidate.company_thumb,         //公司缩略图

                title : this.formValidate.title,                        //文章标题

                description : this.formValidate.description,           //文章描述

                content : this.formValidate.content,               //文章内容
                
                sort : this.formValidate.sort,                    //排序

                keywords:  this.formValidate.keywords,

            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
    }
}
</script>